document.body.ontouchstart = function(eee){
    eee.preventDefault()
}
var yyy = document.getElementById('xxx');
var context = yyy.getContext('2d');
var lineWidth;
autoSetCanvasSize(yyy)
listenTomouse(yyy)
//设置橡皮状态
var eraserEnabled = false
pencil.onclick = function () {
    eraserEnabled = false
    pencil.classList.add('active')
    eraser.classList.remove('active')
}
eraser.onclick = function () {
    eraserEnabled = true
    eraser.classList.add('active')
    pencil.classList.remove('active')
}
trash.onclick = function(){
    context.clearRect(0,0,yyy.width,yyy.height)
}
download.onclick = function(){
    a = document.createElement('a')
    document.body.appendChild(a)
    a.href=yyy.toDataURL("image/png")
    a.download = '我的画作'
    a.click()
}
red.onclick = function () {
    context.strokeStyle = 'red'
    red.classList.add('active')
    blue.classList.remove('active')
    green.classList.remove('active')
}
blue.onclick = function () {
    context.strokeStyle = 'blue'
    red.classList.remove('active')
    blue.classList.add('active')
    green.classList.remove('active')
}
green.onclick = function () {
    context.strokeStyle = 'green'
    red.classList.remove('active')
    blue.classList.remove('active')
    green.classList.add('active')
}
thin.onclick = function () {
    lineWidth = 3
}
thick.onclick = function () {
    lineWidth = 10
}
//设置画板与窗口一样大
function autoSetCanvasSize(canvas) {
    SetCanvasSize()

    window.onresize = function () {
        SetCanvasSize()
    }
    function SetCanvasSize() {
        var pageWidth = document.documentElement.clientWidth
        var pageHeight = document.documentElement.clientHeight

        canvas.width = pageWidth
        canvas.height = pageHeight
    }
}
//画一条线
function drawline(x1, y1, x2, y2) {
    context.beginPath();
    //context.strokeStyle = 'black'
    context.moveTo(x1, y1)//起点
    context.lineWidth = lineWidth
    context.lineTo(x2, y2)
    context.stroke()
    context.closePath()
}
//主要鼠标监听事件函数
function listenTomouse(Canvas) {
    var using = false
    var lastPoint = {
        x: undefined, y: undefined//创造后面的点
    }
    //特性检测
    if (document.body.ontouchstart !== undefined) {
        //触屏设备
        Canvas.ontouchstart = function (a) {
            var x = a.touches[0].clientX
            var y = a.touches[0].clientY
            //状态变量，表示开始画图
            using = true
            if (eraserEnabled) {
                context.clearRect(x - 5, y - 5, 10, 10)
            } else {
                lastPoint = {
                    "x": x,
                    "y": y
                }
            }
        }
        Canvas.ontouchmove = function (a) {
            var x = a.touches[0].clientX
            var y = a.touches[0].clientY
            if (!using) { return }
            if (eraserEnabled) {
                context.clearRect(x - 5, y - 5, 10, 10)
            } else {
                var newPoint = {
                    "x": x,
                    "y": y
                }
                drawline(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
                lastPoint = newPoint
            }
        }
        Canvas.ontouchdown = function (a) {

        }
    }
    else {
        //非触屏设备
        //按下鼠标
        Canvas.onmousedown = function (a) {
            //获取鼠标点击的坐标
            var x = a.clientX
            var y = a.clientY
            //状态变量，表示开始画图
            using = true
            if (eraserEnabled) {
                context.clearRect(x - 5, y - 5, 10, 10)
            } else {
                lastPoint = {
                    "x": x,
                    "y": y
                }
            }
        }
        //鼠标移动
        Canvas.onmousemove = function (a) {
            var x = a.clientX
            var y = a.clientY
            if (!using) { return }
            if (eraserEnabled) {
                context.clearRect(x - 5, y - 5, 10, 10)
            } else {
                var newPoint = {
                    "x": x,
                    "y": y
                }
                drawline(lastPoint.x, lastPoint.y, newPoint.x, newPoint.y)
                lastPoint = newPoint
            }
        }
        Canvas.onmouseup = function (a) {
            using = false
        }
    }
}
